<template>
  <div class="app-container">
    <div class="left">
      <el-form ref="form" :model="form" label-width="200px" :rules="rules">
        <el-form-item prop="messages_name" label="账户名"label-width="230px" >
          <el-input v-model.trim="form.messages_name"  maxlength="18"  style="max-width:500px;"/>
        </el-form-item>
        <el-form-item prop="messages_send_pwd" label="短信发送密码"  label-width="230px" >
          <el-input type="password" show-password v-model.trim="form.messages_send_pwd" maxlength="32" style="max-width:500px;" />
        </el-form-item>
        <el-form-item  label="备注"  label-width="230px" >
          <el-input type="textarea"  v-model.trim="form.messages_desc" style="max-width:500px;" />
        </el-form-item>
        <el-form-item  label="备注"  label-width="230px" >
          <el-input type="textarea"  v-model.trim="form.messages_desc" style="max-width:500px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <!--1-->
    </div>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import {mapGetters} from "vuex";
import {addOrUpdateMessage, getMessage} from "@/api/message";
export default {
  data() {
    return {
      form: {
        messages_platform:'云信通',
        messages_name: undefined,
        messages_send_pwd: undefined,
        messages_desc:undefined
      },
      rules:{
        messages_name:[{ required: true, message: '账户名不能为空', trigger: 'blur' }],
        messages_send_pwd:[{ required: true, message: '短信发送密码不能为空', trigger: 'blur' }],
      }
    }
  },
  computed:{
    tokenFig(){
      return {token:getToken()}
    },
  },
  created() {
    this.getMessageData()
  },
  methods: {
    getMessageData(){
      getMessage(this.form).then((res)=>{
        if(res.status==200){
          if(res.data != '') this.form = res.data
        }
      })
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addOrUpdateMessage(this.form).then(res=>{
            if(res.status==200){
              this.$message({
                message: res.msg,
                type: 'success'
              });
            }else{
              this.$message({
                message:  res.msg,
                type: 'error'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.app-container{
  display: flex;
  /*background-color: red;*/
}
.left,.right{
  width: 50%;
}
</style>

